/**
 * Foxit Software Inc.
 * Copyright(C) 2005-2014, all rights reserved.
 * The following code is copyrighted and contains proprietary information
 * and trade secrets of Foxit Software Inc.

 * Description: AnnotUIManager
 * Author: shaojie zhuo
 */
define(function (require, exports, module) {
    var RectUtils = WebPDF.RectUtils;
    var PDFRect = WebPDF.PDFRect;
    var CommonTools = WebPDF.Common;
    var CommentAnnotType = WebPDF.PDFData.CommentAnnotType;
    var ImageEngine = WebPDF.ImageEngine;
    /**
     * UI manager for annotation.
     * @constructor
     * @ignore
     */
    ImageEngine.AnnotUIManager = function (annotHandlerManager, readerApp) {
        var _annotHandlerManager = annotHandlerManager;
        var _readerApp = readerApp;
        var _annotCanvasID = "";
        var _self = this;

        this.init = function(){
            var docView = _readerApp.getMainView().getDocView();
            _annotCanvasID = docView.getDocViewContainerID() + "_AnnotCanvas";
            var jqPagesContainerDiv = $("#" + docView.getDocViewContainerID());
            var firstPageView = docView.getPageView(0);
            if (firstPageView != null && firstPageView.isContentCreated()) {
                $("#" + firstPageView.getPageViewContainerID()).parent().parent()
                    .append("<canvas class='vml' style='position:absolute;top:0px;left:0px' id='" + _annotCanvasID + "'></canvas>");               
            }
            else {
                jqPagesContainerDiv.append("<canvas class='vml' style='position:absolute;top:0px;left:0px' id='"
                    + _annotCanvasID + "'></canvas>");
            }
            var docViewDimension = docView.getDocViewDimension();
            var scrollApi = docView.getScrollApi();
            if (scrollApi != null) {
                docViewDimension.width -= scrollApi.getScrollBarWidth();
                docViewDimension.height -= scrollApi.getScrollBarHeight();
            }
            var canvasElem = document.getElementById(_annotCanvasID);
            if (canvasElem != null) {
                if(!$.support.canvas){
                    uuClass && uuClass.Canvas.InitCavansElement(canvasElem);
                }
                canvasElem = document.getElementById(_annotCanvasID);
                canvasElem.width = docViewDimension.width;
                canvasElem.height = docViewDimension.height;
            }

            _readerApp.addIgnoreMouseEventClass("fwr_popup_content");
        };

        this.getAnnotDivID = function (pageView, annotName) {
            return pageView.getPageViewContainerID() + "_Annots_" + annotName;
        };

        this.getCommentAnnotDivID = function (pageView, annotName) {
            return pageView.getPageViewContainerID() + "_Comment_Annots_" + annotName;
        };

        this.getCommentAnnotQuadDivID = function (pageView, annotName, quadIndex) {
            var divId = _self.getCommentAnnotDivID(pageView, annotName);
            divId += "_quad_" + quadIndex;
            return divId;
        };

        this.getCommentAnnotRectDivID = function (pageView, annotName) {
            var divId = _self.getCommentAnnotDivID(pageView, annotName);
            divId += "_rect";
            return divId;
        };

        this.getTextAnnotDivID = function (pageView, annotName) {
            return pageView.getPageViewContainerID() + "_Text_Annots_" + annotName;
        };

        this.getInkAnnotDivID = function (pageView, annotName) {
            return pageView.getPageViewContainerID() + "_Ink_Annots_" + annotName;
        };

        this.getAnnotCanvasDivID = function (pageView, annotName) {
            return pageView.getPageViewContainerID() + "_Annots_Canvas_" + annotName;
        };

        this.getAnnotPopupDivID = function (pageView, annotName) {
            return pageView.getPageViewContainerID() + "_Popup_" + annotName;
        };

        this.getPageAnnotsContainerID = function (pageView) {
            return pageView.getPageViewContainerID() + "_AnnotsContainer";
        };

        this.getTypewriterAnnotDivID = function (pageView, annotName) {
            return pageView.getPageViewContainerID() + "_Typewriter_Annots_" + annotName;
        };

        this.getTypewriterAnnotRectDivID = function (pageView, annotName) {
            var divId = _self.getTypewriterAnnotDivID(pageView, annotName);
            divId += "_rect";
            return divId;
        };

        this.getAnnotDivIDFromTypewriterAnnotRectDivID = function (typewriterAnnotRectDivID) {
            return typewriterAnnotRectDivID.replace("_Typewriter", "").replace("_rect", "");
        };

        this.getAnnotMoveDivID = function (pageView, annotName) {
            var divId = _self.getAnnotDivID(pageView, annotName);
            divId += "_move";
            return divId;
        };

        function _getClassByTextAnnotName(name) {
            switch (name) {
                case "Comment":
                    return "fwr-comment-annot-icon";
                    break;
                case "Key":
                    return "fwr-key-annot-icon";
                    break;
                case "Note":
                    return "fwr-note-annot-icon";
                    break;
                case "Help":
                    return "fwr-help-annot-icon";
                    break;
                case "NewParagraph":
                    return "fwr-new-paragraph-annot-icon";
                    break;
                case "Paragraph":
                    return "fwr-paragraph-annot-icon";
                    break;
                case "Insert":
                    return "fwr-insert-annot-icon";
                    break;
                default:
                    return "fwr-default-annot-icon";
            }
        }

        /*
        function _getBGImgUrlByTextAnnotName(name) {
            switch (name) {
                case "Comment":
                    return "images/annot/commentAnnot.png";
                    break;
                case "Key":
                    return "images/annot/keyAnnot.png";
                    break;
                case "Note":
                    return "images/annot/noteAnnot.png";
                    break;
                case "Help":
                    return "images/annot/helpAnnot.png";
                    break;
                case "NewParagraph":
                    return "images/annot/NewParagraphAnnot.png";
                    break;
                case "Paragraph":
                    return "images/annot/ParagraphAnnot.png";
                    break;
                case "Insert":
                    return "images/annot/insertAnnot.png";
                    break;
                default:
                    return "images/annot/commentAnnot.png";
            }
        }*/

        function _getImgUrlClassByAnnotState(state) {
            switch (state) {
                case "Accepted":
                    return "fwr-annot-state-accept";
                    break;
                case "Rejected":
                    return "fwr-annot-state-rejected";
                    break;
                case "Cancelled":
                    return "fwr-annot-state-canceled";
                    break;
                case "Completed":
                    return "fwr-annot-state-completed";
                    break;
                default:
                    return "fwr-annot-state-default";
            }
        }

        /**
         * 创建回复列表的html
         * @param annot 需要创建回复列表html的annotation
         * @returns {string} 回复列表的html
         * @private
         */
        function _createReplyChainHtmlContent(annot) {
            var replyChain = annot.getReplyChain();
            var replyCnt = replyChain.length;
            var divStr = "";
            var contentClass;
            var contentEditableAttr;
            for (var j = 0; j < replyCnt; j++) {
                var reply = replyChain[j];
                var color = reply.getColor();
                var textColor = CommonTools.isColorBlack(color) ? "color:#fff;" : "color:#000;";
                //begin reply div
                divStr += "<div class='popup_child' style='position:relative;margin-bottom:5px;border-style:solid; border-width: 1px;border-color:" + color + ";" + textColor + "'>";

                //begin title div
                divStr += "<div class='popup_child' style='position:relative;left:0px;top:0px;height:18px;overflow:hidden;background-color:" + color + "'>";
                var replyOffsetLeft = 2;
                var stateImageClass = "", state;
                var annotStateList = reply.getStateList();
                if (annotStateList.length > 0) {
                    replyOffsetLeft += 18;
                    for (var k = 0; k < annotStateList.length; k++) {
                        state = annotStateList[k];
                        if (state.getStateMode() == "Review") {
                            stateImageClass = _getImgUrlClassByAnnotState(state.getState());
                        }
                    }
                    divStr += "<div class='popup_child fwr-annot-state-icon " + stateImageClass + "'></div>";
                }

                var replyTitle = reply.getTitle(); //"Reply " + (j + 1);
                divStr += "<div class='popup_child' style='position:relative;left:" + replyOffsetLeft + "px;'><div style='position: relative;line-height:18px; float:left;background-color:"
                    + color + "'>" + CommonTools.htmlEncodeEx(replyTitle) + "</div>";
                divStr += "<div class='popup_child' style='position:relative;margin-left:15px;float:left;background-color:"
                    + color + "'>" + CommonTools.timestamp2DateString(reply.getModifyDate(), CommonTools.AnnotTimeFormat)
                    + "</div></div>";
                //end title div
                divStr += "</div>";

                divStr += "<div class='popup_child' style='position:relative;clear:both;padding-left:5px;padding-right:5px;both; left: 0px; top: 0px;'>";
                contentClass =  "popup_child";
                contentEditableAttr = "";
                if(_readerApp.isEditable()){
                    contentClass += "fwr_popup_content";
                    contentEditableAttr = "contenteditable='true'";
                }

                divStr += "<div class='" + contentClass + "' annot-name='" + reply.getAnnotName()
                    + "' annot-reply='true' " + contentEditableAttr + " style='clear:both;padding-top:2px;padding-bottom:2px;word-wrap: break-word; word-break: normal;color:#000'>"
                    + CommonTools.htmlEncodeEx(reply.getContents()) + "</div>";
                divStr += _createReplyChainHtmlContent(reply);
                divStr += "</div>";

                divStr += "</div>";
            }
            return divStr;
        }

        /**
         * 创建popup对应的html
         * @param annot {WebPDF.PDFData.PDFAnnot} annot annotation to create html.
         * @param {WebPDF.PDFView.PDFPageView} pageView page view of current annotation
         * @param {Number|null|undefined}  extraScale 额外的放大倍数，主要用在打印的时候对页面进行缩放使用，默认值为1
         * @returns {string} popup对应的html
         * @ignore
         */
        this.createPopupAnnotHtmlContent = function (annot, pageView, extraScale) {
            var popup = annot.getPopup();
            var noPrintClassName = "no-print";
            if (popup == null || annot.getHeadAnnot() != null) {
                return "";
            }
            var annotName = annot.getAnnotName();
            var popupDivID = _self.getAnnotPopupDivID(pageView, annotName);
            var popupPDFRect = popup.getRect();
            var popupDocRect = pageView.pdfToDoc(popupPDFRect, false);
            var popupWidth = RectUtils.width(popupDocRect) * extraScale;
            var popupHeight = RectUtils.height(popupDocRect) * extraScale;
            if (popupDocRect.top < 0) {
                popupDocRect.top = 0;
                popupDocRect.bottom += popupHeight;
            }
            var displayStyle = "";
            if (popup.getOpenState() === 0) {
                displayStyle = "display:none;";
            }            
          
            var textColor = CommonTools.isColorBlack(annot.getColor()) ? "color:#fff;" : "";
            var popupHtml = "<div id='" + popupDivID + "' class='fwr-popup-annot " + noPrintClassName + "' style='left:"
                + (popupDocRect.left * extraScale) + "px;top:"
                + (popupDocRect.top * extraScale) + "px;width:" + popupWidth + "px;height:"
                + popupHeight + "px;background-color:" + annot.getColor() + ";" + displayStyle + textColor + "' page-index='"
                + pageView.getPageIndex()
                + "' annot-name='" + annotName + "'>";

            popupHtml += "<div class='popup_header' style='position:absolute;left:0px;top:0px;height:20px;width:100%;overflow:hidden'>";
            if (annot.getSubType() === WebPDF.PDFData.AnnotType.Text) {
                var annotTypeClass = _getClassByTextAnnotName(annot.getTextAnnotName());
                popupHtml += "<div class='popup_header " + annotTypeClass  + "'></div>";
            }
            popupHtml += "<div class='popup_header' style='position:relative;left:10px;width:" + (popupWidth - 40)
                + "px'><div class='popup_child'  style='position: absolute; left: 0px; top: 2px;background-color:"
                + annot.getColor() + "'>" + CommonTools.htmlEncodeEx(annot.getSubject()) + "</div>";
            popupHtml += "<div class='popup_header' style='position:absolute;top:2px;height:18px;right:1px;background-color:"
                + annot.getColor() + "'>" + CommonTools.timestamp2DateString(annot.getModifyDate(), CommonTools.AnnotTimeFormat)
                + "</div></div>";
            popupHtml += "<div  data-i18n='Annot.ClosePopupAnnot' class='fwr-annot-close-btn' style='left:"
                + (popupWidth - 20) + "px;'></div>";
            popupHtml += "</div>";

            //title div
            popupHtml += "<div class='popup_header' style='position:absolute;left:0px;top:20px;height:20px;width:100%'>";
            var annotStateList = annot.getStateList();
            var stateImageClass = "";
            if (annotStateList.length > 0) {
                for (var k = 0; k < annotStateList.length; k++) {
                    if (annotStateList[k].getStateMode() == "Review") {
                        stateImageClass = _getImgUrlClassByAnnotState(annotStateList[k].getState());
                    }
                }
                popupHtml += "<div class='popup_header fwr-annot-state-icon " + stateImageClass + "'></div>";
            }
            popupHtml += "<div class='popup_header' style='white-space: nowrap;overflow: hidden;text-overflow: ellipsis;position:absolute;top:2px;height:18px;left:10px'>"
                + CommonTools.htmlEncodeEx(annot.getTitle()) + "</div>";
            popupHtml += "</div>";
            //end title div

            //content div
            var contentColor = "rgb(255, 255, 255)";
            if (annot.getColor() === "#ffffff") {
                contentColor = "rgb(240, 240, 240)";
            }
            popupHtml += "<div class='popup_child' style='overflow: auto; background-color: " + contentColor + ";white-space: pre-wrap; position: absolute; left: 4px; top:40px; width: " + (popupWidth - 8) + "px; bottom:10px;'>";
            popupHtml += "<div class='popup_child' style='position:relative;padding:2px;clear:both;left: 0px; top: 0px;'>";
            popupHtml += "<div class='popup_child fwr_popup_content' annot-reply='false' contenteditable='true' style='clear:both;padding-top:2px;padding-bottom:2px;word-wrap: break-word; word-break: normal;color:#000'>"
                + CommonTools.htmlEncodeEx(annot.getContents()) + "</div>";
            popupHtml += "</div>";
            popupHtml += _createReplyChainHtmlContent(annot);
            //end content div
            popupHtml += "</div>";
            //end popup div
            popupHtml += "</div>";         
            return popupHtml;
        };

        /**
         * Create html for an annotation.
         * @param {WebPDF.PDFView.PDFPageView} pageView page view of current annotation
         * @param {WebPDF.PDFData.PDFAnnot} annot annotation to create html.
         * @param {String} annotName name of annotation
         * @param {Number|null|undefined} extraScale 额外的放大倍数，主要用在打印的时候对页面进行缩放使用，默认值为1
         * @return {String} html for an annotation.
         * @ignore
         * */
        this.createAAnnotHtmlContent = function (pageView, annot, annotName, extraScale) {
            if (annot == null || pageView == null || !annot.isVisible())
                return "";
            var noPrintClassName = annot.canBePrint() ? "" : "no-print";
            var isAnnotRenderWithBackgroundImg = _annotHandlerManager.isAnnotRenderWithBackgroundImage(annot);
            var pdfPage = pageView.getPDFPage();
            var pageIndex = pageView.getPageIndex();
            var pageRotate = (pdfPage.getPageRotate() * 90) % 360;
            var annotPDFRect = annot.getRect();
            var annotDocRect = pageView.pdfToDoc(annotPDFRect, true);
            var scaledAnnotDocRect = new PDFRect();
            RectUtils.copy(annotDocRect, scaledAnnotDocRect);
            extraScale = (extraScale!=null && extraScale) > 0 ? extraScale : 1;
            scaledAnnotDocRect.left *= extraScale;
            scaledAnnotDocRect.top *= extraScale;
            scaledAnnotDocRect.right *= extraScale;
            scaledAnnotDocRect.bottom *= extraScale;
            var annotScaledDocWidth = RectUtils.width(scaledAnnotDocRect);
            var annotScaledDocHeight = RectUtils.height(scaledAnnotDocRect);
            var annotDivID = _self.getAnnotDivID(pageView, annot.getAnnotName());
            var annotDivStr = "";
            switch (annot.getType()) {
                case WebPDF.PDFData.AnnotType.Link:
                {
                    var action = annot.getAction();
                    if (action != null) {
                        switch (action.getActionType()) {
                            case "URI":
                            {
                                var uri = action.getURI();
                                uri = uri.replace(/^\s*/g, "");
                                var uriTmp = uri.toLowerCase();
                                var bHttp = uriTmp.indexOf("http:") === 0;
                                var bHttps = uriTmp.indexOf("https:") === 0;
                                if (!bHttp && !bHttps) {
                                    uri = "http://" + uri;
                                }
                                annotDivStr = "<div id='" + annotDivID + "' class='fwr-annot fwr_link_annot' style='left:"
                                    + scaledAnnotDocRect.left + "px;top:" + scaledAnnotDocRect.top + "px;width:"
                                    + annotScaledDocWidth + "px;height:"
                                    + annotScaledDocHeight + "px;' link-uri='"
                                    + WebPDF.Common.htmlEncodeEx(uri) + "' annot-name='" + annotName
                                    + "' page-index='" + pageIndex + "' title=\"" + uri + "\"></div>";
                            }
                                break;
                            case "GoTo":
                                annotDivStr = "<div id='" + annotDivID + "' class='fwr-annot fwr_link_annot' style='left:"
                                    + scaledAnnotDocRect.left + "px;top:" + scaledAnnotDocRect.top + "px;width:"
                                    + annotScaledDocWidth + "px;height:"
                                    + annotScaledDocHeight + "px;' page-index='"
                                    + pageIndex + "' annot-name='" + annotName + "'></div>";
                                break;
                            default:
                                break;
                        }
                    }
                    else {
                        annotDivStr = "<div id='" + annotDivID + "' class='fwr-annot' style='left:" + scaledAnnotDocRect.left
                            + "px;top:" + scaledAnnotDocRect.top + "px;width:" + annotScaledDocWidth
                            + "px;height:" + annotScaledDocHeight + "px;' page-index='"
                            + pageIndex + "' annot-name='" + annotName + "'></div>";
                    }
                }
                    break;
                case WebPDF.PDFData.AnnotType.MarkUp:
                {
                    if (isAnnotRenderWithBackgroundImg) {
                        annotDivStr = "<div id='" + annotDivID + "' class='fwr-annot' style='left:" + scaledAnnotDocRect.left
                            + "px;top:" + scaledAnnotDocRect.top + "px;width:" + annotScaledDocWidth + "px;height:"
                            + annotScaledDocHeight + "px;' page-index='" + pageIndex
                            + "' annot-name='" + annotName + "'></div>";
                    } else {
                        var subType = annot.getSubType();
                        switch (subType) {
                            case    CommentAnnotType.COMMENTTYPE_HIGHLIGHT:
                            case    CommentAnnotType.COMMENTTYPE_UNDERLINE:
                            {
                                var extraClass = "";
                                if (subType === CommentAnnotType.COMMENTTYPE_UNDERLINE) {
                                    extraClass = "fwr-annot-underline-parent";
                                }
                                else {
                                    extraClass = "fwr-annot-highlight-parent";
                                }
                                annotDivStr = "<div id='" + annotDivID + "' class='fwr-annot " + noPrintClassName + " " + extraClass
                                    + "' style='left:" + scaledAnnotDocRect.left + "px;top:" + scaledAnnotDocRect.top
                                    + "px;width:" + annotScaledDocWidth + "px;height:"
                                    + annotScaledDocHeight + "px;' page-index='" + pageIndex
                                    + "' annot-name='" + annotName + "'></div>";

                                var quadPoints = annot.getQuadPoints();
                                var bUseQuad = false;
                                var annotShowDivID = _self.getCommentAnnotDivID(pageView, annotName);
                                var annotShowDivHtml = "<div class= '" + noPrintClassName + "'id='" + annotShowDivID + "'>";
                                var rect;
                                if (quadPoints != null) {
                                    var quadRectArray = _annotHandlerManager.quadPointsToRectArray(quadPoints, subType,
                                        pdfPage.getPageMatrix());
                                    if (quadRectArray != null) {
                                        for (var i = 0; i < quadRectArray.length; i++) {
                                            rect = quadRectArray[i];
                                            rect = pageView.pdfToDoc(rect, true);
                                            var quadRectDivID = _self.getCommentAnnotQuadDivID(pageView, annotName, i);
                                            annotShowDivHtml += "<div id='" + quadRectDivID
                                                + "' class='fwr-annot-highlight' style='background-color:" + annot.getColor()
                                                + ";left:" + (rect.left * extraScale) + "px;top:" + (rect.top * extraScale)
                                                + "px;width:" + (RectUtils.width(rect) * extraScale) + "px;height:"
                                                + (RectUtils.height(rect) * extraScale) + "px' ></div>";
                                        }
                                        bUseQuad = true;
                                    }
                                }
                                if (!bUseQuad) {
                                    var rectDivId = _self.getCommentAnnotRectDivID(pageView, annotName);
                                    annotShowDivHtml += "<div id='" + rectDivId
                                        + "' class='fwr-annot-highlight' style='background-color:" + annot.getColor() + ";left:" +
                                        scaledAnnotDocRect.left + "px;top:" + scaledAnnotDocRect.top + "px;width:"
                                        + annotScaledDocWidth + "px;height:" + annotScaledDocHeight + "px' ></div>";
                                }
                                annotShowDivHtml += "</div>";
                                annotDivStr += annotShowDivHtml;
                            }
                                break;
                            case WebPDF.PDFData.AnnotType.Text:
                            {
                                if (!isAnnotRenderWithBackgroundImg) {
                                    //do not print text annotation.
                                    noPrintClassName = "no-print";
                                    annotDivStr = "<div id='" + annotDivID + "' class='fwr-annot fwr-annot-text-parent' style='left:"
                                        + scaledAnnotDocRect.left + "px;top:" + scaledAnnotDocRect.top + "px;width:"
                                        + annotScaledDocWidth + "px;height:"
                                        + annotScaledDocHeight + "px;' page-index='"
                                        + pageIndex + "' annot-name='" + annotName + "'>";
                                    var annotShowDivID = _self.getTextAnnotDivID(pageView, annotName);
                                    var annotShowDivHtml = "<div>";
                                    var textAnnotBGImgClass = _getClassByTextAnnotName(annot.getTextAnnotName());
                                    annotShowDivHtml += "<div class='fwr-text-annot " + noPrintClassName + " " + textAnnotBGImgClass + "' id='" + annotShowDivID
                                        + "' style='width:" + annotScaledDocWidth + "px;height:" + annotScaledDocHeight
                                        + "px;background-position: center center; background-repeat: no-repeat;'>";
                                    annotShowDivHtml += "</div>";
                                    annotShowDivHtml += "</div>";
                                    annotShowDivHtml += "</div>";
                                    annotDivStr += annotShowDivHtml;
                                }
                            }
                                break;
                            case WebPDF.PDFData.AnnotType.Ink:
                            {
                                if (!isAnnotRenderWithBackgroundImg) {
                                    annotDivStr = "<div id='" + annotDivID + "' class='fwr-annot fwr-annot_ink_parent' style='left:"
                                        + scaledAnnotDocRect.left + "px;top:" + scaledAnnotDocRect.top + "px;width:"
                                        + annotScaledDocWidth + "px;height:"
                                        + annotScaledDocHeight + "px;' page-index='"
                                        + pageIndex + "' annot-name='" + annotName + "'>";
                                    var annotShowDivID = _self.getInkAnnotDivID(pageView, annotName);
                                    var canvasID = _self.getAnnotCanvasDivID(pageView, annotName);
                                    var annotShowDivHtml = "<div class='" + noPrintClassName + "'>";
                                    annotShowDivHtml += "<div class='fwr_ink_annot' id='" + annotShowDivID + "' style='left:" +
                                        scaledAnnotDocRect.left + "px;top:" + scaledAnnotDocRect.top + "px;width:"
                                        + annotScaledDocWidth + "px;height:"
                                        + annotScaledDocHeight + "px'>";
                                    annotShowDivHtml += "<div style='position:absolute;left:0px;top:0px;width:100%;height:100%'>";
                                    annotShowDivHtml += "<canvas class='vml' id='" + canvasID + "' width='"
                                        + annotScaledDocWidth + "' height='"
                                        + annotScaledDocHeight
                                        + "' style='position:absolute;left:0px;top:0px;width:100%;height:100%;' />";
                                    annotShowDivHtml += "</div>";
                                    annotShowDivHtml += "</div>";
                                    annotShowDivHtml += "</div>";                                  
                                    annotDivStr += annotShowDivHtml + "</div>";
                                }
                            }
                                break;
                            default:
                                break;
                        }
                    }
                    var popupHtml = _self.createPopupAnnotHtmlContent(annot, pageView, extraScale);
                    annotDivStr += popupHtml;
                }
                    break;
                case WebPDF.PDFData.AnnotType.TypeWriter:
                {
                    if (!isAnnotRenderWithBackgroundImg) {
                        var itType = annot.getIT();
                        if (itType.toLowerCase() == WebPDF.PDFData.TypewriterAnnotType.TYPEWRITERTYPE_TYPEWRITER.toLowerCase()) {
                            var textAlign = "left";
                            switch (annot.getTextAlign()) {
                                case WebPDF.PDFData.TypeWriterTextAlignStyle.CENTERED:
                                {
                                    textAlign = "center";
                                }
                                    break;
                                case WebPDF.PDFData.TypeWriterTextAlignStyle.RIGHT_JUSTIFIED:
                                {
                                    textAlign = "right";
                                }
                                    break;
                                default:
                                    break;
                            }
                            var rotate = (annot.getRotate() % 360 + 360) % 360;
                            var extraRotateClass = "";
                            var extraFilter = "";
                            var unRotateAnnotDocRect = new PDFRect();
                            RectUtils.copy(annotDocRect, unRotateAnnotDocRect);
                            if (rotate != pageRotate) {
                                var rotateMatrix = new WebPDF.PDFMatrix();
                                var realRotate = Math.abs(rotate - pageRotate);
                                switch (realRotate) {
                                    case 90:
                                    {
                                        rotateMatrix.Translate(-annotDocRect.left, -annotDocRect.bottom, false);
                                        rotateMatrix.Rotate(Math.PI / 180 * realRotate, false);
                                        rotateMatrix.Translate(annotDocRect.left, annotDocRect.bottom, false);
                                        extraRotateClass = "fwr_rotate_-90";
                                        extraFilter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=3);";
                                    }
                                        break;
                                    case 180:
                                    {
                                        rotateMatrix.Translate(-annotDocRect.right, -annotDocRect.bottom, false);
                                        rotateMatrix.Rotate(Math.PI / 180 * realRotate, false);
                                        rotateMatrix.Translate(annotDocRect.right, annotDocRect.bottom, false);
                                        extraRotateClass = "fwr_rotate_-180";
                                        extraFilter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=2);";
                                    }
                                        break;
                                    case 270:
                                    {
                                        rotateMatrix.Translate(-annotDocRect.right, -annotDocRect.top, false);
                                        rotateMatrix.Rotate(Math.PI / 180 * realRotate, false);
                                        rotateMatrix.Translate(annotDocRect.right, annotDocRect.top, false);
                                        extraRotateClass = "fwr_rotate_-270";
                                        extraFilter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=1);";
                                    }
                                        break;
                                    default:
                                        break;
                                }

                                var rotateRect = rotateMatrix.TransFormRect(annotDocRect.left, annotDocRect.top,
                                    annotDocRect.right, annotDocRect.bottom);
                                annotDocRect.left = rotateRect[0];
                                annotDocRect.top = rotateRect[1];
                                annotDocRect.right = rotateRect[2];
                                annotDocRect.bottom = rotateRect[3];
                            }
                            var annotWidth = RectUtils.width(annotDocRect);
                            var annotHeight = RectUtils.height(annotDocRect);                           
                            var annotDiv = $("<div class='fwr-annot fwr-annot-typewriter-parent' ></div>");
                            annotDiv.attr("id", annotDivID);
                            annotDiv.css({"left": (annotDocRect.left * extraScale)+'px', "top": (annotDocRect.top * extraScale) + "px"});
                            annotDiv.attr("page-index", pageIndex);
                            annotDiv.attr("annot-name", annotName);
                                                    
                            var annotShowDivID = _self.getTypewriterAnnotDivID(pageView, annotName);
                            var opacity = annot.getOpacity();
                            var nPt2Pixel = _readerApp.getPixelsPerPoint();
                            var nScale = pageView.getScale();
                            var fontScale = nScale * extraScale;
                            var fontSize = annot.getFontSize() * nPt2Pixel * fontScale;
                            var lineHeight = annot.getLineHeight() * nPt2Pixel * fontScale;
                            var annotShowDivHtml = null;
                            var style = {};
                            if (WebPDF.Environment.ie8OrLower) {
                                var unRotateAnnotWidth = RectUtils.width(unRotateAnnotDocRect);
                                var unRotateAnnotHeight = RectUtils.height(unRotateAnnotDocRect);
                                annotShowDivHtml = $("<div id='" + annotShowDivID + "' style='position:absolute;left:"
                                    + (unRotateAnnotDocRect.left * extraScale) + "px;top:" + (unRotateAnnotDocRect.top * extraScale)
                                    + "px;width:" + (unRotateAnnotWidth * extraScale) + ";height:" + (unRotateAnnotHeight * extraScale)
                                    + "px'></div>");
                                
                                style.left ="0px";
                                style.top = "0px";
                                style.width = (annotWidth * extraScale) + "px";
                                style["max-width"] = (annotWidth * extraScale) + "px";
                                style.height = (annotHeight * extraScale) + "px";
                                style["max-height"] = (annotHeight * extraScale) + "px";
                                style["font-size"] = fontSize + "px;";
                                style.color = annot.getFontColor();
                                style.opacity = opacity;                                
                                style.filter = "alpha(opacity=" + opacity * 100 + ") " + extraFilter;
                                style["text-align"] = textAlign;
                                style["font-family"] = annot.getFontName();
                                style["line-height"] = lineHeight + "px";
                            }
                            else {
                                annotShowDivHtml = $("<div></div>").attr("id", annotShowDivID);                                
                                //style.left = (annotDocRect.left * extraScale) + "px";
                                //style.top =  (annotDocRect.top * extraScale)  + "px";
                                style.width = (annotWidth * extraScale) + "px";
                               // style["max-width"] =(annotWidth * extraScale) + "px";
                                style.height = (annotHeight * extraScale) + "px";
                               // style["max-height"] =(annotHeight * extraScale) + "px";
                                style["font-size"] = fontSize + "px";
                                style.color = annot.getFontColor();                                
                                style.opacity = opacity;
                                style.filter = "alpha(opacity=" + opacity * 100 + ")";
                                style["text-align"] = textAlign;
                                style["font-family"] = annot.getFontName();
                                style["line-height"] = lineHeight + "px";                             
                            }
                            
                            var rectDivId = _self.getTypewriterAnnotRectDivID(pageView, annotName);                            
                         
                          //  annot_rect.css({"left": style.left, "top": style.top, "position":"absolute"});      
                           // annotShowDivHtml.css({"border": "2px solid #F3A74D"})                           
                            annotShowDivHtml.css({height: style.height});
                           // annot_rect.css({"padding": "5px"})
                            annotDiv.append("<div direction='sw' style='left:-3.5px;bottom:-3.5px;cursor:sw-resize' class='fwr-annot-scaleImg sw'></div>");
                            annotDiv.append("<div direction='nw' style='left:-3.5px;top:-3.5px;cursor:nw-resize' class='fwr-annot-scaleImg nw'></div>");
                            annotDiv.append("<div direction='se' style='right:-3.5px;bottom:-3.5px;cursor:se-resize;' class='fwr-annot-scaleImg se'></div>");
                            annotDiv.append("<div direction='ne' style='right:-3.5px;top:-3.5px;cursor:ne-resize;' class='fwr-annot-scaleImg ne'></div>");
                           // style.left = 0;
                           // style.top = 0;                            
                            var textarea = $("<textarea onselectstart='return false;' class='typewriter-annot-nor'></textarea>").val(annot.getContents()).css(style);
                            textarea.addClass(extraRotateClass);
                            textarea.appendTo(annotShowDivHtml);                            
                            textarea.attr("id", rectDivId);        
                            textarea.html(annot.getContents());
                            annotDiv.append(annotShowDivHtml);        
                            annotDivStr = annotDiv.prop("outerHTML");
                        }
                    }
                }
                    break;
                default:
                    break;
            }
            return annotDivStr;
        };

        /**
         * 创建页面对应的所有annotation的html
         * @param {WebPDF.PDFView.PDFPageView} pageView page view of current annotation
         * @param {Number|null|undefined} extraScale 额外的放大倍数，主要用在打印的时候对页面进行缩放使用，默认值为1
         * @returns {string} 页面对应的所有annotation的html
         * @ignore
         */
        this.createAnnotsHtmlContent = function (pageView, extraScale) {
            if (!pageView)
                return '';
            var pPDFPage = pageView.getPDFPage();
            var annotsHtml = "<div id='" + _self.getPageAnnotsContainerID(pageView) + "'>";
            pPDFPage.enumAnnots(function (annot) {              
                var annotDivStr = _self.createAAnnotHtmlContent(pageView, annot, annot.getAnnotName(), extraScale);
                annotsHtml += annotDivStr;
                return true;
            });

            annotsHtml += "</div>";
            return annotsHtml;
        };


        this.getCanvasElement = function () {
            return document.getElementById(_annotCanvasID);
        };

        this.clearCanvas = function () {
            var canvasElem = document.getElementById(_annotCanvasID);
            if (canvasElem == null) {
                return null;
            }
            var ctx = canvasElem.getContext("2d");
            ctx.clearRect(0, 0, canvasElem.width, canvasElem.height);
            return ctx;
        };
    };
});